<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>
<!--
    1/注册全局指令
        Vue.directive('my-directive',function(el,binding){
            el.innerHTML = binding.value.topperCase()
        })
    2/注册局部指令
        directives : {
            'my-directive' : {
                bind(el, binding){
                    el.innerHTML = binding,value,topperCase()
                }
            }
        }
    3/使用指令
        v-my-directive='xxx'
-->

<!--
    需求：自定义2个指令
        1功能类似于v-text,但转换为全大写 v-upper-text
        2功能类似与v-text,但转化为全小写 v-lower-text
-->
<div id="test1">
    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg1"></p>
</div>

<div id="test2">
    <p v-upper-text="msg2"></p>
    <p v-lower-text="msg2"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /*定义全局指令*/
    Vue.directive('upper-text',function (el/*指令属性所在的标签对象*/, binding/*包含指令相关信息的对象*/) {
        console.log(el,binding);
        el.textContent = binding.value.toUpperCase();
    })

    const vm = new Vue({
        el:'#test1',
        data:{
            msg1:'NBA I Love This Game!'
        },
        /*定义局部指令*/
        directives:{
            'lower-text':function (el, binding) {
                el.textContent = binding.value.toLowerCase();
            }
        }
    })

    const vm2 = new Vue({
        el:'#test2',
        data:{
            msg2:'This is why we play!'
        }
    })
</script>
</body>
</html>